// 存放 js 调用代码

// this.Base.getId('box').css('color',red).html('标题').click(function(){console.log('aaa')});
// 这个是连缀要实现的结果,实现的方法是让每个 Base中的函数都返回 this 这个库本身即可
/* 
    this.$().getClass('member') 重复
    注意到 hover中把 over,out 两个函数都挂在 member 这个网页元素上
    所以其中的this代表函数所在的网页元素 member
    但是网页元素不能直接调用Base类库的css函数,所以要改造Base类库
*/

// window.onload = function () {
//     this.$().getClass('member').hover(function () {
//         console.log(this);
//         console.log(this.innerHTML);
//         // console.log(this.css('color','red')); 不是类库所以不能调用
//         // 我们希望把member代表的网页元素传入到Base类库中,方便设置css
//         $(this).css('background','url(./images/arrow2.png) 55px center no-repeat');
//         console.log('show');
//         $().getClass('member_ul').show();
//     },function () {
//         $(this).css('background','url(./images/arrow.png) 55px center no-repeat');
//         console.log('hide');
//         $().getClass('member_ul').hide();
//     });

//     // 登录框
//     // 所有浏览器都支持
//     var login = $().getId('login');
//     var screen = $().getId('screen');
//     login.center(350,250).addClass('a').removeClass('a').resize(function () {
//         // login.center(350,250);
//         // 判断登录框出现遮罩才出现
//         console.log(login.css('display'));
//         if (login.css('display')=='block') {
//             screen.lock();
//         }
//     })

//     this.$().getClass('login').click(function () {
//         login.center(350,250);
//         // 实现锁屏功能
//         $().getId('screen').lock();
//         login.css('display','block');
//     });

//     this.$().getClass('close').click(function () {
//         // 实现解锁功能
//         $().getId('screen').unlock();
//         login.css('display','none');
//     });

//     var test_login = document.getElementById('login');

//     /* 拖拽流程
//     1.点下鼠标
//     2.移动鼠标
//     3.抬起鼠标 */
//     // test_login.offsetLeft test_login.offsetTop 
//     // 代表登录框的左上角离视口的左上角的距离,但是在鼠标移动的时候不会改变
//     login.drag();

// }

$(function () {
    this.$('#header .member').hover(function () {
        //   console.log(this);
        //   console.log(this.innerHTML);
        // console.log(this.css('color','red')); 不是类库所以不能调用
        // 我们希望把member代表的网页元素传入到Base类库中,方便设置css
        $(this).css('background', 'url(./images/arrow2.png) 55px center no-repeat');
        //   console.log('show');
        $('#header .member_ul').show().animate({
            t: 30,
            step: 10,
            mul: {
                o: 100,
                h: 120
            }
        });
    }, function () {
        $(this).css('background', 'url(./images/arrow.png) 55px center no-repeat');
        console.log('hide');
        $('#header .member_ul').animate({
            t: 30,
            step: 10,
            mul: {
                o: 0,
                h: 0
            },
            fn: function () {
                $('#header .member_ul').hide();
            }
        });
    });

    // 遮罩的画布
    var screen = $('#screen');

    // 登录框
    //     // 所有浏览器都支持
    var login = $('#login');

    login.center(350, 250).addClass('a').removeClass('a').resize(function () {
        // login.center(350,250);
        // 判断登录框出现遮罩才出现
        // console.log(login.css('display'));
        if (login.css('display') == 'block') {
            screen.lock();
        }
    });

    this.$('#header .login').click(function () {
        login.center(350, 250);
        // 实现锁屏功能
        screen.lock().animate({
            attr: 'o',
            start: 0, /* 每次都从0开始渐变 */
            target: 80,
            t: 30,
            step: 10
        });
        login.css('display', 'block');
    });

    this.$('#login .close').click(function () {
        // 实现解锁功能
        //   要先执行动画再隐藏screen层
        screen.animate({
            attr: 'o',
            target: 0,
            t: 30,
            step: 10,
            fn: function () {
                screen.unlock();
            }
        });
        login.css('display', 'none');
    });

    // 注册框
    //     // 所有浏览器都支持
    var reg = $('#reg');

    reg.center(600, 550).addClass('a').removeClass('a').resize(function () {
        // reg.center(350,250);
        // 判断登录框出现遮罩才出现
        // console.log(reg.css('display'));
        if (reg.css('display') == 'block') {
            screen.lock();
        }
    });

    this.$('#header .reg').click(function () {
        reg.center(600, 550);
        // 实现锁屏功能
        screen.lock().animate({
            attr: 'o',
            start: 0, /* 每次都从0开始渐变 */
            target: 80,
            t: 30,
            step: 10
        });
        reg.css('display', 'block');
    });

    this.$('#reg .close').click(function () {
        // 实现解锁功能
        //   要先执行动画再隐藏screen层
        screen.animate({
            attr: 'o',
            target: 0,
            t: 30,
            step: 10,
            fn: function () {
                screen.unlock();
            }
        });
        reg.css('display', 'none');
    });

    reg.drag($('#reg h2').first());
    // var test_login = document.getElementById('login');

    /* 拖拽流程
    1.点下鼠标
    2.移动鼠标
    3.抬起鼠标 */
    // test_login.offsetLeft test_login.offsetTop 
    // 代表登录框的左上角离视口的左上角的距离,但是在鼠标移动的时候不会改变
    login.drag($('#login h2').first(), $('#login .other').last());
    // $('#share').css('top', '88px');//.css('top', '88px');
    // 百度分享初始位置
    $('#share').css('top', (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2 + 'px');

    // 百度分享收缩功能
    $('#share').hover(function () {
        $(this).animate({
            attr: 'x',
            target: 0
        });
    }, function () {
        $(this).animate({
            attr: 'x',
            target: -211
        });
    });

    /* addEvent(window, 'scroll', function () {
        $('#share').animate({
            attr: 'y',
            target: getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2 
        });
    }); */

    $(window).bind('scroll', function () {
        setTimeout(function () {
            $('#share').animate({
                attr: 'y',
                target: getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2
            });
        },100);
    });

    // 滑动导航
    // 事件响应总是响应最高的一层网页元素
    $('#nav .about li').hover(function () {
        var target = $(this).first().offsetLeft;
        $('#nav .nav_bg').animate({
            attr: 'x',
            target: target + 20,
            t: 30,
            step: 10,
            fn: function () {
                $('#nav .white').animate({
                    attr: 'x',
                    target: -target
                });
            }

        });
    }, function () {
        $('#nav .nav_bg').animate({
            attr: 'x',
            target: 20,
            t: 30,
            step: 10,
            fn: function () {
                $('#nav .white').animate({
                    attr: 'x',
                    target: 0
                });
            }
        });
    });

    $('#sidebar h2').toggle(function () {
        $(this).next().animate({
            mul: {
                h: 0,
                o: 0
            }
        });
    }, function () {
        $(this).next().animate({
            mul: {
                h: 150,
                o: 100
            }
        });
    });

    // 表单验证

    //  初始化表单
    $('form').first().reset(); // firefox
    // focus blur 等事件没有封装，需要一个函数封装一般的事件,所以要实现bind 事件发生器
    // 以scroll为例
    // alert($('form').first().user.value);
    // console.log($('form').form('user').first().value);

    /* console.log( $('form').form('user').value());
    $('form').form('user').value('lpz'); */

    $('form').form('user').bind('focus', function () {
        $('#reg .info_user').css('display', 'block');
        $('#reg .error_user').css('display', 'none');
        $('#reg .succ_user').css('display', 'none');
    }).bind('blur', function () {
        // trim 在 tools.js
        if (trim($(this).value()) == '') {
            $('#reg .info_user').css('display', 'none');
            $('#reg .error_user').css('display', 'none');
            $('#reg .succ_user').css('display', 'none');
        } else if (!check_user()) {
            $('#reg .info_user').css('display', 'none');
            $('#reg .error_user').css('display', 'block');
            $('#reg .succ_user').css('display', 'none');
        } else {
            $('#reg .info_user').css('display', 'none');
            $('#reg .error_user').css('display', 'none');
            $('#reg .succ_user').css('display', 'block');
        }
    });

    function check_user() {
        if(/[\w]{2,20}/.test(trim($('form').form('user').value()))) return true;
    }

    $('form').form('pass').bind('focus', function () {
        $('#reg .info_pass').css('display', 'block');
        $('#reg .error_pass').css('display', 'none');
        $('#reg .succ_pass').css('display', 'none');
    }).bind('blur', function () {
        // trim 在 tools.js
        if (trim($(this).value()) == '') {
            $('#reg .info_pass').css('display', 'none');
            $('#reg .error_pass').css('display', 'none');
            $('#reg .succ_pass').css('display', 'none');
        } else {
            if (check_pass()) {
                $('#reg .info_pass').css('display', 'none');
                $('#reg .error_pass').css('display', 'none');
                $('#reg .succ_pass').css('display', 'block');
            } else {
                $('#reg .info_pass').css('display', 'none');
                $('#reg .error_pass').css('display', 'block');
                $('#reg .succ_pass').css('display', 'none');
            }
        }
    });

    function check_pass() {
        var value = trim($('form').form('pass').value());
        var value_length = value.length;
        var code_length = 0;
        /*   alert(value_length); */
        /* 第一个必须条件的验证在6-20位之间 */
        if (value_length >= 6 && value_length <= 20) {
            $('#reg .info_pass .q1').html('●').css('color', 'green');
        } else {
            $('#reg .info_pass .q1').html('●').css('color', '#666');
        }

        /* 第二个必须条件的验证字母数字或非空字符，任意一个即可 */
        if (value_length >= 6 && !/\s/.test(value)) {
            $('#reg .info_pass .q2').html('●').css('color', 'green');
        } else {
            $('#reg .info_pass .q2').html('●').css('color', '#666');
        }

        /* 第三个必须条件的验证，大写字母，小写字母，数字，非空字符 任意两种混拼即可 */
        if (/[\d]/.test(value)) {
            code_length++;
        }
        if (/[a-z]/.test(value)) {
            code_length++;
        }
        if (/[A-Z]/.test(value)) {
            code_length++;
        }
        if (/[^\w]/.test(value)) {
            code_length++;
        }

        if (code_length >= 2) {
            $('#reg .info_pass .q3').html('●').css('color', 'green');
        } else {
            $('#reg .info_pass .q3').html('●').css('color', '#666');
        }

        // 安全级别
        /* 高：大于等于10个字符，三种不同类别的字符混拼
        中：大于等于8个字符，两种不同类别的字符混拼
        低：大于等于1个字符 
        判断的时候务必从高到低判断，防止高级别无法执行到*/
        if (value_length >= 10 && code_length >= 3) {
            $('#reg .info_pas .s1').css('color', 'green');
            $('#reg .info_pas .s2').css('color', 'green');
            $('#reg .info_pas .s3').css('color', 'green');
            $('#reg .info_pas .s4').html('高').css('color', 'green');
        } else if (value_length >= 8 && code_length >= 2) {
            $('#reg .info_pas .s1').css('color', '#f60');
            $('#reg .info_pas .s2').css('color', '#f60');
            $('#reg .info_pas .s3').css('color', '#ccc');
            $('#reg .info_pas .s4').html('中').css('color', '#f60');
        } else if (value_length >= 1) {
            $('#reg .info_pas .s1').css('color', 'maroon');
            $('#reg .info_pas .s2').css('color', '#ccc');
            $('#reg .info_pas .s3').css('color', '#ccc');
            $('#reg .info_pas .s4').html('低').css('color', 'maroon');
        } else {
            $('#reg .info_pas .s1').css('color', '#ccc');
            $('#reg .info_pas .s2').css('color', '#ccc');
            $('#reg .info_pas .s3').css('color', '#ccc');
            $('#reg .info_pas .s4').html('');
        }
        if (value_length >= 6 && value_length <= 20 && !/\s/.test(value) && code_length >= 2) {
            return true;
        }else{
            return false;
        }
    }

    $('form').form('pass').bind('keyup', function () {
        check_pass($('form').form('pass'));
    });

    // 密码确认
    $('form').form('notpass').bind('focus', function () {
        $('#reg .info_notpass').css('display', 'block');
        $('#reg .error_notpass').css('display', 'none');
        $('#reg .succ_notpass').css('display', 'none');
    }).bind('blur', function () {
        if (trim($(this).value()) == '') {
            $('#reg .info_notpass').css('display', 'none');
        } else if (check_notpass()) {
            $('#reg .info_notpass').css('display', 'none');
            $('#reg .error_notpass').css('display', 'none');
            $('#reg .succ_notpass').css('display', 'block');
        } else {
            $('#reg .info_notpass').css('display', 'none');
            $('#reg .error_notpass').css('display', 'block');
            $('#reg .succ_notpass').css('display', 'none');
        }
    });

    function check_notpass() {
        return trim($('form').form('notpass').value()) == trim($('form').form('pass').value());
    }

    // 提问
    $('form').form('ques').bind('change',function () {
        if (check_ques()) {
            $('#reg .error_ques').css('display','none');
        }
    });

    function check_ques() {
        if ($('form').form('ques').value()!=0) {
            return true;
        }else{
            return false;
        }
        
    }

    // 回答
    $('form').form('ans').bind('focus', function () {
        $('#reg .info_ans').css('display', 'block');
        $('#reg .error_ans').css('display', 'none');
        $('#reg .succ_ans').css('display', 'none');
    }).bind('blur', function () {
        if (trim($(this).value()) == '') {
            $('#reg .info_ans').css('display', 'none');
        } else if (check_ans()) {
            $('#reg .info_ans').css('display', 'none');
            $('#reg .error_ans').css('display', 'none');
            $('#reg .succ_ans').css('display', 'block');
        } else {
            $('#reg .info_ans').css('display', 'none');
            $('#reg .error_ans').css('display', 'block');
            $('#reg .succ_ans').css('display', 'none');
        }
    });

    function check_ans() {
        if (trim($('form').form('ans').value()).length >= 2 && trim($('form').form('ans').value()).length <= 32) {
            return true;
        }
        return false;
    }

    // 电子邮件 lpz2@163.com
    // 邮件名： a-zA-Z0-9_-.
    // 域名： a-zA-Z0-9_-
    // 域名后缀：a-zA-Z
    // 后缀种类: .com .net .cn .asia .mobi .com.cn .net.cn
    $('form').form('email').bind('focus', function () {
        // 补全界面
        if ($(this).value().indexOf('@') == -1) {
            $('#reg .all_email').css('display', 'block');
        }

        $('#reg .info_email').css('display', 'block');
        $('#reg .error_email').css('display', 'none');
        $('#reg .succ_email').css('display', 'none');
    }).bind('blur', function () {
        // 补全界面
        $('#reg .all_email').css('display', 'none');

        if (trim($(this).value()) == '') {
            $('#reg .info_email').css('display', 'none');
            /* }else if (/^lpz2@163.com$/.test(trim($this).value())) { */
            /* }else if (/^[a-zA-Z0-9_\-\.]+@163.com$/.test(trim($this).value())) { */
            /* }else if (/^[a-zA-Z0-9_\-\.]+@[a-zA-Z0-9_\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(trim($(this).value()))) { */
        } else if (check_email()) {
            $('#reg .info_email').css('display', 'none');
            $('#reg .error_email').css('display', 'none');
            $('#reg .succ_email').css('display', 'block');
        } else {
            $('#reg .info_email').css('display', 'none');
            $('#reg .error_email').css('display', 'block');
            $('#reg .succ_email').css('display', 'none');
        }
    });

    function check_email() {
        if(/^[\w\-\.]+@[\w\-]+(\.[a-zA-Z]{2,4}){1,2}$/.test(trim($('form').form('email').value())) ){
            return true;
        }else{
            return false;
        }
    }

    // 电子邮件补全系统键入补全下拉菜单
    $('form').form('email').bind('keyup', function () {
        if ($(this).value().indexOf('@') == -1) {
            $('#reg .all_email').css('display', 'block');
            $('#reg .all_email li span').html($(this).value());
        } else {
            $('#reg .all_email').css('display', 'none');
        }
        // 邮件自动补全的邮箱数量
        if (event.keyCode == 40) {
            if (this.index == undefined || this.index >= $('#reg .all_email li').length() - 1) {
                this.index = 0; // 表示上下键选择的是第几个邮箱
            } else {
                this.index++;
            }
            $('#reg .all_email li').css('background', 'none');
            $('#reg .all_email li').css('color', '#666');
            $('#reg .all_email li').eq(this.index).css('background', '#e5edf2');
            $('#reg .all_email li').eq(this.index).css('color', '#369');
        }
        if (event.keyCode == 38) {
            if (this.index == undefined || this.index <= 0) {
                this.index = $('#reg .all_email li').length() - 1; // 表示上下键选择的是第几个邮箱
            } else {
                this.index--;
            }
            $('#reg .all_email li').css('background', 'none');
            $('#reg .all_email li').css('color', '#666');
            $('#reg .all_email li').eq(this.index).css('background', '#e5edf2');
            $('#reg .all_email li').eq(this.index).css('color', '#369');
        }

        if (event.keyCode == 13) {
            $(this).value($('#reg .all_email li').eq(this.index).text());
            $('#reg .all_email').css('display', 'none');
            this.index = undefined; // 每次都从第一个邮箱开始
        }



    });

    // 电子邮件补全系统点击获取
    // mousedown事件在blur前激活
    $('#reg .all_email li').bind('mousedown', function () {
        $('form').form('email').value($(this).text());
    });

    // 电子邮件补全系统鼠标移入移出效果
    $('#reg .all_email li').hover(function () {
        $(this).css('background', '#e5edf2');
        $(this).css('color', '#369');
    }, function () {
        $(this).css('background', 'none');
        $(this).css('color', '#666');
    });

    // 年月日
    var year = $('form').form('year');
    var month = $('form').form('month');
    var day = $('form').form('day');

    var day30 = [4, 6, 9, 11];
    var day31 = [1, 3, 5, 7, 8, 10, 12];

    // alert(year.first());
    // 注入年
    for (var i = 1950; i <= 2020; i++) {
        year.first().add(new Option(i, i), undefined);
    }
    // 注入月
    for (var ii = 1; ii <= 12; ii++) {
        month.first().add(new Option(ii, ii), undefined);
    }

    year.bind('change', select_day);
    month.bind('change', select_day);
    day.bind('change',function () {
        if (check_birthday()) {
            $('#reg .error_birthday').css('display', 'none');
        }
    });

    function check_birthday() {
        if (year.value()!=0 && month.value()!=0 && day.value()!=0) {
            return true;
        }else{
            return false;
        }
    }

    function select_day() {
        if (year.value() != 0 && month.value() != 0) {
            // 清理之前的注入
            // 多次点击年不会产生多套1-30日历
            day.first().options.length = 1;

            // 不确定的日
            var cur_day = 0;

            // 注入日
            if (inArray(day31, parseInt(month.value()))) {
                cur_day = 31;
            } else if (inArray(day30, parseInt(month.value()))) {
                cur_day = 30;
            } else {
                if ((parseInt(year.value()) % 4 == 0 && parseInt(year.value()) % 100 != 0) || parseInt(year.value()) % 400 == 0) {
                    cur_day = 29;
                } else {
                    cur_day = 28;
                }
            }
            for (var i = 0; i <= cur_day; i++) {
                day.first().add(new Option(i, i), undefined);
            }
        } else {
            // 清理之前的注入
            // 重新选到年清理注入日
            day.first().options.length = 1;
        }
    }

    function check_ps() {
        var num = 200 - $('form').form('ps').value().length;
        if (num >= 0) {
            $('#reg .ps').eq(0).css('display', 'block');
            $('#reg .ps .num').eq(0).html(num);
            $('#reg .ps').eq(1).css('display', 'none');
            return true;
        } else {
            $('#reg .ps').eq(0).css('display', 'none');
            $('#reg .ps .num').eq(1).html(Math.abs(num)).css('color', 'red');
            $('#reg .ps').eq(1).css('display', 'block');
            return false;
        }
    }

    // 备注
    // 右键粘贴无效,因为粘贴事件在内容粘贴到文本框前触发
    $('form').form('ps').bind('keyup', check_ps).bind('paste',function () {
        setTimeout(check_ps,1);
    });

    // 清尾
    $('#reg .ps .clear').click(function () {
        $('form').form('ps').value($('form').form('ps').value().substring(0, 200));
        check_ps();
    });

    // 提交
    $('form').form('sub').click(function () {
        var flag = true;
        if (!check_user()) {
            $('#reg .error_user').css('display', 'block');
            flag = false;
        }
        if (!check_pass()) {
            $('#reg .error_pass').css('display', 'block');
            flag = false;
        }
        if (!check_notpass()) {
            $('#reg .error_notpass').css('display', 'block');
            flag = false;
        }

        if (!check_ques()) {
            $('#reg .error_ques').css('display', 'block');
            flag = false;
        }

        if (!check_ans()) {
            $('#reg .error_ans').css('display', 'block');
            flag = false;
        }

        if (!check_email()) {
            $('#reg .error_email').css('display', 'block');
            flag = false;
        }

        if (!check_birthday()) {
            $('#reg .error_birthday').css('display', 'block');
            flag = false;
        }
        
        if (!check_ps()) {
            flag = false;
        }
        if (flag) {
           $('form').first().submit();
        }
    });

    // 轮播器初始化
    // $('#banner img').css('display','none');
    // $('#banner img').eq(0).css('display','block');
    // $('#banner img').css('opacity',0);
    $('#banner img').opacity(0);
    $('#banner img').eq(0).opacity(100);
    $('#banner li').eq(0).css('color','#333');
    $('#banner strong').html( $('#banner img').eq(0).attr('alt'));
    
    // 轮播器计数器
    var banner_index = 1;

    // 轮播器的种类
    var banner_type = 2; // 1表示透明度 2表示上下滚动

    // 自动轮播器
    var banner_timer = setInterval(banner_fn,3000);

    // alert($('#banner ul li').css('color'));
    // 轮播器手动播放
    $('#banner ul li').hover(function name() {
        clearInterval(banner_timer);
        // alert($(this).css('color'));// 兼容 ie7 #333 #999
        if ($(this).css('color'!='rgb(51,51,51)') && $(this).css('color'!='#333') ) {
            banner(this,banner_index==0? $('#banner ul li').length()-1: banner_index-1);
        }
    },function () {
        banner_index = $(this).index() + 1;
        banner_timer = setInterval(banner_fn,1000);
    });

    // 鼠标从第一张移开的时候切换到第2,3张不定,要求总是切换到第二张
    // obj 是 一个 li网页元素本身
    // $(obj).index() == banner_index
    function banner(obj,prev) {
        // $('#banner img').css('display','none');
        // $('#banner img').eq($(obj).index()).css('display','block');
        $('#banner ul li').css('color','#999');
        $(obj).css('color','#333');
        $('#banner strong').html($('#banner img').eq( $(obj).index()).attr('alt'));

        // $('#banner img').css('zIndex',1).opacity(0);
        if (banner_type==1) {
            $('#banner img').eq(prev).animate({
                attr:'o',
                target:0,
                t:30,
                step:10
            }).css('zIndex',1);
    
            $('#banner img').eq($(obj).index()).animate({
                attr:'o',
                target:100,
                t:30,
                step:10
            }).css('zIndex',2);
        }else if (banner_type==2){
            $('#banner img').eq(prev).animate({
                attr:'y',
                target:150,
                t:30,
                step:10
            }).css('zIndex',1).opacity(100);
    
            $('#banner img').eq($(obj).index()).animate({
                attr:'y',
                target:0,
                t:30,
                step:10
            }).css('top','-150px').css('zIndex',2).opacity(100);
        }
        
    }

    function banner_fn() {
        if (banner_index >= $('#banner ul li').length()) {
            banner_index = 0;
        }
        banner($('#banner ul li').eq(banner_index).first(), banner_index==0? $('#banner ul li').length()-1: banner_index-1);
        banner_index++;
    }

    // 当图片进入到可见区域时候,将图片的xsrc的地址替换到src
    // alert($('.wait_load').first().src); // 都支持
    // alert($('.wait_load').first().xsrc);// W3C 不支持 ie7 支持
    // alert($('.wait_load').eq(0).attr('xsrc'));
    // $('.wait_load').eq(0).attr('src', $('.wait_load').eq(0).attr('xsrc'));

    // 问题:获取图片元素到最外层顶点元素的距离
    // 因为 ie7 offsetTop 是计算和父元素的距离
    // alert($('.wait_load').first().offsetTop); // w3c 兼容  ie 7 不兼容
    // alert(offsetTop($('.wait_load').first()));
    // 问题：获取页面可视区域的最低点的位置
    // alert(getInner().height + getScroll().top);
    var wait_load = $('.wait_load');
    wait_load.opacity(0);

    $(window).bind('scroll', function () {
        // 拖动会产生多个scroll事件执行,会出现多次
        setTimeout(function () {
            for (var i = 0; i < wait_load.length(); i++) {
                var _this = wait_load.ge(i);
                if (getInner().height + getScroll().top >= offsetTop(_this)) {
                    // alert(wait_load.length()); // 这里是3     
                    $(_this).attr('src', $(_this).attr('xsrc')).animate({
                        attr: 'o',
                        target: 100,
                        t: 30,
                        step: 10
                    });
                    // alert(wait_load.length()); // 这里是1
                }
            }
            
        }, 100);
    });
});


